<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bbsItem {
        background-color: #ccc;
        margin-bottom: 20px;
      }
      .contant {
        background-color: #f5f5f5;
      }
      .start {
        background-color: #f5f5f5;
        height: 30px;
        padding: 5px 0;
      }
      .start .items {
        float: left;
        width: 30px;
        height: 30px;
        margin-right: 5px;
        border: 1px solid yellow;
      }
      .bgy {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h3>1.变色</h3>
    <div class="start">
      <div class="items"></div>
      <div class="items"></div>
      <div class="items"></div>
      <div class="items"></div>
    </div>
    <h3>2.计算器</h3>
    <div class="calculator">
      <input type="number" name="" id="num1" />
      <select name="" id="sel">
        <option value="+" selected>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="number" name="" id="num2" />
      <button id="btn">=</button>
      <input type="number" name="" id="num3" />
    </div>
    <h3>3.留言板</h3>
    <div class="bbs">
      <div>昵称：<input type="text" id="name" /></div>
      <div>
        <textarea name="" id="textarea" cols="30" rows="10"></textarea>
      </div>
      <div><button class="save">发表</button></div>
      <div class="contant"></div>
    </div>
    <h3>4.轮播图</h3>
    <div class="banner"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      //变色
      $('.items').mouseenter(function () {
        let index = $(this).index()
        $('.items').each(function (idx) {
          if (idx <= index) {
            $(this).addClass('bgy')
          } else {
            $(this).removeClass('bgy')
          }
        })
      })
      $('.start').mouseleave(function () {
        $('.items').removeClass('bgy')
      })
      // 计算器
      $('#btn').click(function () {
        switch ($('#sel option:selected').val()) {
          case '+':
            $('#num3').val(Number($('#num1').val()) + Number($('#num2').val()))
            break
          case '-':
            $('#num3').val(Number($('#num1').val()) - Number($('#num2').val()))
            break
          case '*':
            $('#num3').val(Number($('#num1').val()) * Number($('#num2').val()))
            break
          case '/':
            $('#num3').val(Number($('#num1').val()) / Number($('#num2').val()))
            break
        }
      })

      //留言板
      $('.save').click(function () {
        if ($('#name').val() === '' || $('#textarea').val() === '') {
          alert('昵称或者内容不能为空')
        } else {
          let ele = $('<div>', { class: 'bbsItem' })
          let date = new Date()
          let dateStr =
            date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          let name = $('#name').val()
          let text = $('#textarea').val()
          let str = `<div><span>${name}</span> <span>时间${dateStr}<span/></div>
                    <div>${text}</div>`
          ele.html(str)
          $('.contant').append(ele)
        }
      })
      //轮播图
    </script>
  </body>
</html>
